
.main-box, .tip-box { margin-bottom: 15px; }

.main-box .menu-box,
.container-box .tree-box { float: left; }

.main-box .btn-box,
.container-box .form-box { float: right; }

.main-box {
  overflow: hidden;

  /deep/.ant-btn-group,
  button { margin-left: 5px; }
}

.container-box {

  /deep/.ant-tree li { position: relative; }

  .tree-box, .form-box {
    max-height: 600px;
    overflow: auto;
    background-color: #fafafa;
    border: 1px solid #e7e7e7;
    border-radius: 3px;
  }
  .tree-box { padding: 10px 10px 100px 10px; }
  .form-box { padding: 60px 10px 100px 10px; }
  .empty-box { text-align: center; font-size: 12px; color: #9f9f9f; }

  .form-box button { margin-right: 10px; }

  .tree-box {
    .icon-box {
      display: none;
      float: right;
      padding: 0 10px;

      .add { color: #14BA89; }
      .del { color: #F1523A; }

      .add, .del { margin-left: 10px; }
    }

    .file,
    div.title { float: left; }

    .file { margin-right: 7px; margin-top: 7px; }

    div.title {
      width: 80%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  /deep/.ant-tree-icon-hide {
    li.ant-tree-treenode-switcher-close,
    li.ant-tree-treenode-switcher-open {
      padding-top: 4px;
      padding-bottom: 0;
    }

    li .ant-tree-node-content-wrapper {
      height: 30px;
      line-height: 30px;
    }

    .ant-tree-switcher,
    .ant-tree-title {
      position: absolute;
      left: 0;
    }

    .ant-tree-switcher {
      z-index: 10;
      top: 6px;
    }
    .ant-tree-title {
      z-index: 1;
      padding-left: 25px;
      width: 100%;
    }

    .ant-tree-node-selected {
      position: relative;
      color: #303030;
    }

    .ant-tree-title:hover,
    .ant-tree-node-selected {
      width: 100%;
      background-color: #ffedcc;
    }

    .ant-tree-title:hover .icon-box {
      display: inline-block;
    }
  }

}


